/**
 * Created by hasee on 2017/10/11.
 */


import React,{Component} from 'react';
import {
    TabNavigator,
    TabBarBottom,
    // TabBarItem,
    StackNavigator
    } from "react-navigation";
import {
    StyleSheet,
    Image,
    AppRegistry,
    Text,
    Button,
    View
    } from 'react-native';

import Main from './main/Main';
import Chat from './chat/Chat';
import ChatOne from './chat/Chat_one';
import list from './main/list';
import Setting from './setting/stting'

class TabBarItem extends Component {
    render() {
        return(
            <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
                   style={ { tintColor:this.props.tintColor,width:25,height:25 } }
            />
        )
    }

}

const MainScreenNavigator = TabNavigator({
    main: {
        screen:Main,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'主页',
            tabBarIcon:({focused,tintColor}) => (
                <TabBarItem
                    style={[styles.icon, {tintColor: tintColor}]}
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/chat.png')}
                    selectedImage={require('./image/chat.png')}
                    />
            )
        })

    },
    char: {
        screen:Chat,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'天',
            tabBarIcon:({focused,tintColor}) => (
                <TabBarItem
                    style={[styles.icon, {tintColor: tintColor}]}
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/chat.png')}
                    selectedImage={require('./image/chat.png')}
                    />
            )
        })
    },
    setting: {
        screen: Setting,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'我',
            tabBarIcon:({focused,tintColor}) => (
                <TabBarItem
                    style={[styles.icon, {tintColor: tintColor}]}
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/chat.png')}
                    selectedImage={require('./image/chat.png')}
                />
            )
        })
    }
}, {
    tabBarComponent: TabBarBottom,
    swipeEnabled: false,//��ֹ���һ���
    tabBarPosition: 'bottom',
    lazy: true,
//trueinitialRouteName: Setting,
    tabBarOptions: {
        activeTintColor: '#008AC9', // ���ֺ�ͼƬѡ����ɫ
        inactiveTintColor: '#999', // ���ֺ�ͼƬĬ����ɫ
        showIcon: true, // android Ĭ�ϲ���ʾ icon, ��Ҫ����Ϊ true �Ż���ʾ
        indicatorStyle: {height: 0}, // android ��TabBar�������ʾһ���ߣ��߶���Ϊ 0 ��Ͳ���ʾ����
        activeTintColor: '#e91e63',
        height:50,
        width: 50,
        style: {
           backgroundColor: '#fff', // TabBar ����ɫ
        },
        labelStyle: {
           fontSize: 12, // ���ִ�С
        },
    },

});
console.log('test');
const styles = StyleSheet.create({
    container: {
        flex:1,
        //backgroundColor: '#fff'
    },
    icon: {
        height:50,
        width: 50,
        resizeMode: 'contain',
        backgroundColor: 'transparent'
    }
});
const SimpleApp = StackNavigator({
    Home: {screen: MainScreenNavigator},
    ChatOne: {screen: ChatOne},
    List: {screen: list}
},{
    navigationOptions:{
        headerBackTitle:'我是',
        // headerTintColor:'#333333',
        showIcon:true,
        swipeEnabled:false,
        animationEnabled:false,
        headerStyle: {
            backgroundColor: '#154682'
        },
        headerTitleStyle: {
            color: 'green',
            //居中显示
            alignSelf : 'center',
        }
    },

    mode:'card',
});

export default SimpleApp;